Jassif Team Institution

Responsive Web Design - Images

படம் பக்கத்திற்கு பொருந்தும் வகையில் எவ்வாறு அளவிடப்படுகிறது என்பதைப் பார்க்க உலாவி சாளரத்தின் அளவை மாற்றவும்.

Responsive Image Demo - Try resizing your browser window

Using The width Property

width பண்புத்தொகுப்பு சதவீதமாக அமைக்கப்பட்டு, height பண்புத்தொகுப்பு "auto" என அமைக்கப்பட்டால், படம் பதிலளிக்கும் மற்றும் மேலும் கீழும் அளவிடும்:

Example

img {
  width: 100%;
  height: auto;
}

மேலே உள்ள எடுத்துக்காட்டில், படம் அதன் அசல் அளவை விட பெரியதாக அளவிடப்படலாம் என்பதைக் கவனியுங்கள். பல சந்தர்ப்பங்களில், max-width பண்புத்தொகுப்பைப் பயன்படுத்துவது சிறந்த தீர்வாக இருக்கும்.

Using The max-width Property

max-width பண்புத்தொகுப்பு 100% என அமைக்கப்பட்டால், படம் தேவைப்பட்டால் குறைக்கப்படும், ஆனால் அதன் அசல் அளவை விட பெரியதாக அளவிடப்படாது:

Example

img {
  max-width: 100%;
  height: auto;
}

Background Images

பின்னணி படங்களும் மறுஅளவிடுதல் மற்றும் அளவிடுதலுக்கு பதிலளிக்க முடியும்.

இங்கே நாம் மூன்று வெவ்வேறு முறைகளைக் காண்பிப்போம்:

div {
  width: 100%;
  height: 200px;
  background-image: url('a.jpg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

div {
  width: 100%;
  height: 200px;
  background-image: url('b.jpg');
  background-size: 100% 100%;
}

div {
  width: 100%;
  height: 200px;
  background-image: url('c.jpg');
  background-size: cover;
  background-position: center;
}

Responsive Image Gallery

இங்கே, நாம் பதிலளிக்கும் பட கேலரியை உருவாக்க media queries மற்றும் flexbox இரண்டையும் பயன்படுத்துகிறோம்:

Example Code

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 15px;
  padding: 15px;
}

.gallery-item {
  overflow: hidden;
  border-radius: 8px;
}

.gallery-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform 0.5s;
}

.gallery-item:hover img {
  transform: scale(1.05);
}

@media (max-width: 768px) {
  .gallery {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

@media (max-width: 480px) {
  .gallery {
    grid-template-columns: 1fr;
  }
}

Live Demo: Responsive Image Grid

Image A

Image B

Image C

Image D

Image A

Image B

Image C

Image D

Exercise

img {
  width: %;
  height: auto;
}